<template>
	<view class="my-search">
		<view class="search">
			<input type="text" class="input" placeholder="请输入搜索内容" @confirm="goList" v-model="title">
		</view>
		<view class="history">
			<view class="his-item" v-for="item,index in history" :key="index" @click="go(item)">
				<text>{{item}}</text>
				<!-- @tap.stop 或者 @click.stop 组织冒泡 -->
				<text @tap.stop="del(index)">删除</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',//输入框的内容
				history:[],//存放取出来的数据
			}
		},
		onLoad() {
			// 获取本地的历史记录
			// this.history = uni.getStorageSync('history') || []
			
		},
		onShow() {
			// 获取本地的历史记录
			this.history = uni.getStorageSync('history') || []
		},
		methods: {
			// 回车事件
			goList(){
				console.log('回车');
				uni.navigateTo({
					url:'../list/list?title='+this.title
				})
			},
			del(index){
				this.history.splice(index,1)
			},
			go(item){
				uni.navigateTo({
					url:'../list/list?title='+item
				})
			}
		}
	}
</script>

<style lang="scss">
	.search{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: sandybrown;
		.input{
			width: 80%;
			height: 70%;
			border-radius: 20rpx;
			background: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}
	.history{
		padding: 20rpx;
		.his-item{
			display: flex;
			height: 60rpx;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
